<template>
  <div>
     售后订单ID <el-input v-model="afterSaleId" autocomplete="off" placeholder="请输入订单号"
      style="width: 15%;"></el-input>&nbsp;
     会员ID <el-input v-model="memberId" autocomplete="off" placeholder="请输入会员ID"
    style="width: 15%;"></el-input>&nbsp;
     下单时间 <el-date-picker
      v-model="startTime"
      type="date"
      placeholder="开始时间"
      value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker> ——
    <el-date-picker
      v-model="endTime"
      type="date"
      placeholder="结束时间"
      value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
     审核状态 <el-select v-model="status" placeholder="审核状态">
      <el-option v-for="item in options1" :key="item.value1" :label="item.label1" :value="item.value1">
      </el-option>
    </el-select><br><br>
    <el-button type="primary" @click="searchEmp()" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">重置</el-button>

    <!-- 展示页面的表格 -->
    <el-table :data="unitList" v-loading="listLoading" element-loading-text="Loading" border:true fit
      highlight-current-row stripe style="width: 100%" >
      <el-table-column prop="afterSaleId" label="售后订单ID" width="120">
      </el-table-column>
      <el-table-column prop="memberId" label="会员ID" width="120">
      </el-table-column>
      <el-table-column prop="name" label="所属商铺" width="150">
      </el-table-column>
      <el-table-column prop="afterSaleType" label="售后类型" width="150">
      </el-table-column>
      <el-table-column prop="refundAmount" label="退款金额" width="120">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180">
      </el-table-column>
      <el-table-column prop="status" label="审核状态" width="120">
      </el-table-column>
      <el-table-column prop="submissionTime" label="提交时间" width="180">
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">审核</el-button>
          <el-button size="mini" type="info" @click="orderDetail(scope.$index, scope.row)">详细信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 审核 -->
    <el-dialog title="审核售后订单" :visible.sync="dialogUpdateVisible">
      <el-form :model="form">
        <el-form-item label="订单号" :label-width="formLabelWidth">
          <el-input v-model="form.afterSaleId" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="退款金额" :label-width="formLabelWidth">
          <el-input v-model="form.refundAmount" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="会员ID" :label-width="formLabelWidth">
          <el-input v-model="form.memberId" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="申请时间" :label-width="formLabelWidth">
          <el-input v-model="form.updateTime" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="已同意" value="已同意"></el-option>
            <el-option label="已取消" value="已取消"></el-option>
            <el-option label="已拒绝" value="已拒绝"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUnit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>


// 导入api/customer.js中定义接口

import { aftersalePage, updateaftersale, delById } from "@/api/afterSales";



export default {

  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      unitList: [],
      listLoading: true,
      dialogUpdateVisible: false,
      form: { },
      formLabelWidth: "120px",
      currentPage: 1,
      total: 0,
      pageSize: 5,
      options1: [{ value1: '待审核', label1: '待审核' },
      { value1: '已同意', label1: '已同意', disabled: true },
      { value1: '已拒绝', label1: '已拒绝' },
      { value1: '已取消', label1: '已取消' }],
      afterSaleId: "",
      memberId: "",
      startTime: "",
      endTime: "",
      status: "",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      aftersalePage({ pageNum: this.currentPage, pageSize: this.pageSize, afterSaleId: this.afterSaleId,
        memberId: this.memberId, startTime: this.startTime, endTime: this.endTime, status: this.status }).then((response) => {
        console.log(response)
        this.unitList = response.data.list;
        this.total = response.data.total
        this.listLoading = false;
      });
    },
    searchEmp() {
      this.fetchData();
    },

    // 订单详情
    orderDetail(index, row) {
      console.log(index, row);
      this.$router.push({ path: "/order/orderDetail", query: { orderNumber: row.orderNumber, orderDetailName: '售后订单详情' } });
    },

    //在查询后重置
    resetSearchForm() {
      this.afterSaleId = "";
      this.memberId = "";
      this.startTime = "";
      this.endTime = "";
      this.status = "";
      this.fetchData();
    },
    //修改计算单位
    updateUnit() {
      updateaftersale(this.form).then((response) => {
        if (response.code == 200) {
          this.dialogUpdateVisible = false;
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.fetchData();
        }
      });
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialogUpdateVisible = true;
      // findunitByid(row.id).then((response) => {
      //   this.form = response.data;//将查询出来的数据 赋值给表单
      //   this.dialogUpdateVisible = true;
      // });
      this.form = row;
    },
    // handleDelete(index, row) {
    //   // console.log(index, row);
    //   this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       delById({id : row.id}).then((response) => {
    //         this.$message({
    //           type: "success",
    //           message: "删除成功!",
    //         });
    //         this.currentPage = 1,
    //           this.fetchData();
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    // 每页显示的记录数发生变化触发的操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.fetchData()
    },
    // 当前页发生变化触发的操作
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.fetchData(this.code, this.name)
    },

    // 生命周期钩子函数(vue对象创建完,自动调用该方法)
    created() {
      this.fetchData()
    },
  }
}

</script>
